import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

import {
  Row, Col, Tabs, Button, Input, Modal, Icon,
  Spin, Popover, message, DatePicker,
} from 'antd';
import isEmpty from 'lodash/isEmpty';

import { WeaShare } from 'ecCom';

import {
  WeaReqTop,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaNewScroll,
  WeaInputSearch,
  WeaLocaleProvider,
} from 'ecCom';

import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;


import '../style/detail.less';
import '../style/htmlContent.less';
import { GetUrlParam } from '../util/Util.js';

const getLabel = WeaLocaleProvider.getLabel;


@inject('outDetailStore')
@observer
class OutDetail extends React.Component {
  constructor(props) {
    super(props);
    // 获取是否是正文，获取文件名称
     this.state = {
      docid: props.location.query.id,
     };

    this.onTabsChange = this.onTabsChange.bind(this);
  }

  componentDidMount() {
    // 一些初始化请求
    const { outDetailStore } = this.props;
    const { docid } = this.state;

    outDetailStore.getBasic({ id: docid });
    outDetailStore.searchAcc({ id: docid });
    outDetailStore.getContent({ id: docid });
  }

  componentDidUpdate() {
  //   const {outDetailStore} = this.props;
  //   let fileid = "";
  //   let flag = true;
  //   // 图片预览
  //   $('#wea-doc-detail-content-main-scroll img').unbind("click");
  //   $('#wea-doc-detail-content-main-scroll img').bind("click",(event) => {
  //   // $('#wea-doc-detail-content-main-scroll img').click(function (event) {
  //    const imgPool = [];
  //    let indexNum = 0;
  //    //clickImgUrl当前点击的图片的来源链接，clickImgId当前点击图片的id
  //    let clickImgUrl = event.srcElement.src;
  //    let clickImgId = GetUrlParam(clickImgUrl,"fileid")
  //    $('#wea-doc-detail-content-main-scroll img').each(function () {
  //      imgPool.push($(this).attr('src'));
  //    });
  //    let imgShow = imgPool.filter((val)=>{
  //       fileid = GetUrlParam(val,"fileid");
  //       flag = true;
  //       if(fileid === ""){
  //         flag = false;
  //       }
  //       return flag;
  //    })
  //    for (let i = 0; i < imgShow.length; i++) {
  //       let imgid = GetUrlParam(imgShow[i],"fileid");
  //      if (clickImgId === imgid) {
  //        break;
  //      } else {
  //        indexNum++;
  //      }
  //    }
  //    //判断是否展示图片组件
  //    let isShowPicture = true;
  //    if(clickImgId === ""){
  //       isShowPicture = false;
  //    }

  //    if(isShowPicture){
  //      window.IMCarousel.showImgScanner4Pool(true, imgShow, indexNum, null, window.top);
  //    }
  //  });
 }


  // tab
  getTabPane() {
    const { outDetailStore } = this.props;
    const { tabInfo } = outDetailStore;
    return toJS(tabInfo).map((data) => {
      let tab = data.value;
      if (data.key === 'acc') {
        tab = <span>{data.value}({outDetailStore.accTableStore.count})</span>;
      }
      return <Tabs.TabPane ecId={`${this && this.props && this.props.ecId || ''}_undefined@tigrhb@${data.key}`} tab={tab} key={data.key} />;
    });
  }

  onTabsChange(key) {
    const { outDetailStore } = this.props;
    const { attrDatas, scoreDatas, comStore } = outDetailStore;
    const { docid } = this.state;
    outDetailStore.setTabKey(key);
    key === 'acc' && outDetailStore.searchAcc({ id: docid });
  }
  onSearchAcc = v => {
    const { outDetailStore } = this.props;
    const { docid } = this.state;
    outDetailStore.searchAcc({
      id: docid, imageFileName: v,
    })
  }
  // tab 内容的 title
  getTitle() {
    const { outDetailStore } = this.props;
    const { tabKey } = outDetailStore;
    let contentLeft = null;
    let contentRight = null;
    if (tabKey === 'acc') {
      contentLeft = getLabel(21704, '附件列表');
        contentRight = (
          <span style={{ marginRight: 20 }}>
            <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@lx7to1`}
              style={{ width: 180, verticalAlign: 'middle' }}
              placeholder={getLabel(386311, '请输入附件名称')}
              onSearch={this.onSearchAcc}
            />
          </span>

        );
    }
    return (
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mi016r`} className="wea-doc-detail-content-inner-title">
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cr179c`} span={12} style={{ paddingLeft: 20 }}>
          {contentLeft}
        </Col>
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pvzqbj`} span={12} style={{ textAlign: 'right' }}>
          {contentRight}
        </Col>
      </Row>
    );
  }

  getBottom() {
    const { outDetailStore } = this.props;
    const { basicInfo } = outDetailStore;
    if (!basicInfo.doclastmoddatetime) return null;
    return (
      <span className="wea-doc-detail-content-text-sub">
        <span>{getLabel(126385, '最后由')}</span>
        <span>{`${basicInfo.doclastmoduser}`}</span>
        <span>{`${getLabel(126386, '编辑于')}${basicInfo.doclastmoddatetime}`}</span>
      </span>
    );
  }


  render() {
    const { outDetailStore } = this.props;
    const {
       loading, basicInfo, tabKey,
      tabInfo, showSearchAd, doccontent,
      accTableStore,
    } = outDetailStore;
    const { docid } = this.state;
    // 设置页标题

    const title = basicInfo.docSubject || '';
    const markStyle = showSearchAd ? { height: '100%', overflow: 'hidden' } : null;
    return (
      <div className={'wea-doc-detail'}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@l8233c`}>
          <WeaReqTop ecId={`${this && this.props && this.props.ecId || ''}_WeaReqTop@o5z3b1`}
            title={
                <span style={{ paddingLeft: 8, display: 'inline-block', width: '100%' }}>
                  <span style={{ display: 'inline-block', maxWidth: '50%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{title}</span>
                </span>
            }
            loading={accTableStore.loading || loading}
            icon={<i className="icon-coms-doc" />}
            iconBgcolor="#df583a"
            replaceTab={
              tabInfo.length === 0 ?
                <span style={{ display: 'block', height: 37 }} />
                :
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@ny1vtl`}
                  activeKey={tabKey}
                  onChange={this.onTabsChange}
                >
                  {this.getTabPane()}
                </Tabs>
            }

          >
            <div className="wea-doc-detail-content"
              style={tabKey === 'content'
                   ? { padding: '0 0 39px 0' } : {}
                 }
            >
              <div className="wea-doc-detail-content-inner" style={{ overflow: 'hidden' }}>
                <div style={
                   tabKey === 'content'
                  ? {
                    height: '100%',
                  }
                  :
                  {
                    height: '1px',
                    marginTop: '-1px',
                  }
              }
                >
                  <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@5h4mlc`} scrollId="wea-doc-detail-content-main-scroll" height="100%">
                    <div className="wea-doc-detail-content-main"
                      dangerouslySetInnerHTML={{ __html: doccontent }}
                    />
                  </WeaNewScroll>
                </div>
                <div className="wea-doc-detail-content-inner-tab-content"
                  style={{ display: tabKey === 'content' ? 'none' : 'block' }}
                >
                  <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@1f50nt`} scrollId="wea_doc_detail_content" height="100%">
                    {
                      tabKey === 'acc' && this.getTitle()
                    }
                    <div style={{ display: tabKey === 'acc' ? 'block' : 'none' }}>
                      <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@lkqftj`}
                        paginationProps={{
                        	pageSizeOptions: ['10'],
                        }}
                        comsWeaTableStore={accTableStore}
                      />
                    </div>
                  </WeaNewScroll>
                </div>

              </div>
				{tabKey === 'content' && this.getBottom()}
            </div>
          </WeaReqTop>
        </WeaRightMenu>
      </div>
    );
  }
}


OutDetail = WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@ft6z6k`} msg={props.error || getLabel(385218, '对不起，该页面异常，请联系管理员！')} />,
  { error: '' })(OutDetail);

export default OutDetail;
